vue

您所在的位置：网站首页 › vue 子组件传值 › vue

2023-09-05 19:28| 来源: 网络整理| 查看: 265

介绍

主要介绍了Vue this.$emit()方法通过子组件向父组件传值,第一步在父组件中引入子组件，第二步子组件向父组件传值。

第一步：在父组件中引入子组件

使用import引入组件

import indexImportOrder from './components/indexImportOrder'

声明

//定义组件 components:{ indexImportOrder, },

使用

第二步子组件向父组件传值

在子组件中需要向父组件传值处使用this.$emit(“function”,param);

其中function为父组件定义函数，param为需要传递参数

//新订单页面跳转 viewBusiness(){ let flag = false; this.$emit('closeMain',flag); },

在父组件中子组件引用处添加函数v-on:function=“function1”；

其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称

v-on：可用 @ 代替 @function=“function1” ，@ 为 v-on：的简写

val及为子组件中flag，即接收的子组件参数

closeMain(val){ this.flag = val; },

【本文地址】

今日新闻